CSS image "mouseover"

Hi,

I've been trying to create a image mouseOver effect using CSS - is
this possible? Or will I have to use DIV tags or something along
those lines?

I've tried a number of things - the code below will work for the
border no problem, but I can't seem to get the SRC to work - is this
not an option in CSS?

Thanks in advance,
al :)
<a href="" class="abroad"><img src="./graphics/images/abroadBw.jpg"
border=1><br>abroad</a>

A.abroad IMG
{
BORDER-COLOR: white;
SRC: "./graphics/images/abroadBw.jpg"
}
A.abroad:hover IMG
{
BORDER-COLOR: black;
SRC: "./graphics/images/abroad.jpg"
}

Jul 20 '05 #1

Subscribe Post Reply

78160

Jukka K. Korpela

al************@hotmail.com (al) wrote:

I've been trying to create a image mouseOver effect using CSS - is
this possible?
Depends on what you mean by that.
but I can't seem to get the SRC to work - is this
not an option in CSS?

If you need to ask, then you need to start learning CSS, instead of
imagining you know something about it. CSS does not work by making
programs guess what you want.

In most cases, image mouseover effects have been "traditionally" written
to make text change appearance, using JavaScript-dependent image swapping.
The CSS approach is to use text for textual links and to change the
properties (such as text and background color) of the elements.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Jul 20 '05 #2

viza

and then al said:

I've been trying to create a image mouseOver effect using CSS

A.abroad IMG {
BORDER-COLOR: white;
SRC: "./graphics/images/abroadBw.jpg"

There's no CSS property 'src'. You cannot do this in CSS and this is
deliberate and with good reason. An image in a page is page content and
CSS has nothing to do with content*, only how content is displayed.

Use javascript:

<img alt="Off alternate text" src="off.jpg"
onmouseover="this.src='on.jpg';this.alt='On alternate text';"
onmouseout="this.src='off.jpg';this.alt='Off alternate text';">

Remember that in abscence of javscript you will only get off.png.

If you havn't already got it, you need this in your head:
<meta http-equiv="Content-Script-Type" content="text/javascript">

(* apart from generated content, but lets not talk about that)

Jul 20 '05 #3

William Starr Moake

On 9 Aug 2003 03:06:27 -0700, al************@hotmail.com (al) wrote:

Hi,

I've been trying to create a image mouseOver effect using CSS - is
this possible? Or will I have to use DIV tags or something along
those lines?

I found the following vertical menu the other day on a CSS website:

<HTML>
<HEAD>
<TITLE>CSS2 Vertical Rollovers</TITLE>
<STYLE>
H4 {
PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; PADDING-BOTTOM:
0.3em; MARGIN: 0px; PADDING-TOP: 0.3em; TEXT-ALIGN: center
}
DIV.menu {
BORDER-RIGHT: #000 2px solid; PADDING-RIGHT: 0px; BORDER-TOP:
#000 2px solid; PADDING-LEFT: 0px; BACKGROUND: #fff7ad;
PADDING-BOTTOM: 0px; MARGIN: 1em; BORDER-LEFT: #000 2px solid; WIDTH:
100px; PADDING-TOP: 0px; BORDER-BOTTOM: #000 2px solid
}
DIV.menu A {
PADDING-RIGHT: 0.3em; BORDER-TOP: #000 1px solid; DISPLAY:
block; PADDING-LEFT: 0.3em; FONT-WEIGHT: bold; PADDING-BOTTOM: 0.3em;
MARGIN: 1px; WIDTH: 100%; COLOR: #00f; PADDING-TOP: 0.3em; TEXT-ALIGN:
center; TEXT-DECORATION: none
}
UNKNOWN {
WIDTH: auto
}
DIV.menu A:hover {
BACKGROUND: #fc0; COLOR: #00f
}
</STYLE>
</HEAD>
<BODY>
<DIV class=menu>
<H4>Menu Title</H4><A
href="http://www.websiteoptimization.com/products/">Products
<BR></A><A
href="http://www.websiteoptimization.com/services/">Services
<BR></A><A
href="http://www.websiteoptimization.com/about/">About <BR></A><A
href="http://www.websiteoptimization.com/contact/">Contact
<BR></A></DIV>
</BODY>
</HTML>

Jul 20 '05 #4

Matt Rushton

you can do css image rollovers but you dont really have the amount of
control that you can get with JS.

http://www.meyerweb.com/eric/css/edge/popups/demo2.html has a good tutorial
on what you can do.

Matt

"al" <al************@hotmail.com> wrote in message
news:f5**************************@posting.google.c om...

Hi,

I've been trying to create a image mouseOver effect using CSS - is
this possible? Or will I have to use DIV tags or something along
those lines?

I've tried a number of things - the code below will work for the
border no problem, but I can't seem to get the SRC to work - is this
not an option in CSS?

Thanks in advance,
al :)
<a href="" class="abroad"><img src="./graphics/images/abroadBw.jpg"
border=1><br>abroad</a>

A.abroad IMG
{
BORDER-COLOR: white;
SRC: "./graphics/images/abroadBw.jpg"
}
A.abroad:hover IMG
{
BORDER-COLOR: black;
SRC: "./graphics/images/abroad.jpg"
}

Jul 20 '05 #5

Stephen Poley

On Sat, 09 Aug 2003 09:11:33 -1000, William Starr Moake
<ws*****@yahoo.com> wrote:

I found the following vertical menu the other day on a CSS website: ....DIV.menu {
BORDER-RIGHT: #000 2px solid; PADDING-RIGHT: 0px; BORDER-TOP:
#000 2px solid; PADDING-LEFT: 0px; BACKGROUND: #fff7ad;
PADDING-BOTTOM: 0px; MARGIN: 1em; BORDER-LEFT: #000 2px solid; WIDTH:
100px; PADDING-TOP: 0px; BORDER-BOTTOM: #000 2px solid
}

Strewth. Welcome to the world of CSS soup. What's wrong with:

..menu { width: 100px; border: 2px solid black; padding: 0; margin: 1em;
background-color: #fff7ad; }

(other than the width in pixel units, of course).

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Jul 20 '05 #6

William Starr Moake

On Sun, 10 Aug 2003 08:22:32 GMT, "Andrew Thompson"
<an******@bigNOSPAMpond.com> wrote:

"Stephen Poley" <sb*****@xs4all.nl> wrote in message
news:vo********************************@4ax.com.. .
Strewth. Welcome to the....

Are you an Aussie, by any chance, Stephen?

[ For those unfamiliar with it, 'Strewth' is an
expression commonly used by Australians.
It is an abbreviation of "God's Truth" -

Similar to "God's miserable teeth" from J. P. Donleavy's hysterically
funny novel "The Ginger Man."

Jul 20 '05 #7

Bob Crispen

The voices are telling me that William Starr Moake <ws*****@yahoo.com>
wrote on 10 Aug 2003:

[ For those unfamiliar with it, 'Strewth' is an
expression commonly used by Australians.
It is an abbreviation of "God's Truth" -

Similar to "God's miserable teeth" from J. P. Donleavy's hysterically
funny novel "The Ginger Man."

One of my family's favorite expressions, particularly when we're a little
creaky, is "God's wounds, madam!" -- we do our best to mimic the way
Keith Michell delivered that line in the _6 Wives of Henry VIII_ series.
--
Bob Crispen
bo*********@boeing.com

There's plenty of room for all of God's creatures.
Right next to the mashed potatoes.

Jul 20 '05 #8

Mach

In article <f5**************************@posting.google.com >, al
<al************@hotmail.com> wrote:

Hi,

I've been trying to create a image mouseOver effect using CSS - is
this possible? Or will I have to use DIV tags or something along
those lines?

<snip>

You can use z-index's to change the layering of objects. Do some
research on it.

Mach

Jul 20 '05 #9

by: Allen | last post by:

I am trying to add an additional photo/hyperlink to the company web site (I didn't create it) without any luck. The mouseover feature 'highlights' pics by swapping them with another pic using this...

Javascript

How to: use SERVER controls to simulate HTML "link & button" rollo

by: charliewest | last post by:

I am trying use server controls or web controls to simulate the following behavior. I've an image wrapped w/in a link to create a rollover effect as if both elements we're one graphic: <a...

ASP / Active Server Pages

How can I do text1.text=dropdownlist1.DataTextField on "dropdownlist1.MouseOver"?

by: Morten | last post by:

Hi. My problem is that nearly all items in my dropdownlist is quite long and I would like to display the text in a textbox with a mouseover. When I move the mouse down the list I see the bg...

ASP.NET

please explain this "simple" mouseover behavior... bubbling?

by: BKDotCom | last post by:

This has surely been answered somewhere multiple times, but... I'm guessing it's some sort of "bubbling" thing.... <STYLE> ..triggerarea { border:#00C solid 1px; } </STYLE> <UL ID="menu">

Javascript

How to check if a pointer is "valid" ?

by: Manuel | last post by:

I think I can't find this on google/books because is soooooooo basic... This function assign a listner pointer to an image widget: ------------------------------------------------------ void...

C / C++

explain the "new Image();"

by: mmcc128 | last post by:

Currently using the "document.images" to "preload" images - not for future pages, but for the page being loaded. I got it from http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm Its a...

Javascript

Cross Browser "Form Auto Submit on Enter"

by: mattgarvin | last post by:

Hello, I need a piece of javascript that will allow a form to be submitted when Enter is pressed for IE6 and 7, Firefox 2, and recent versions of Safari. It is for a login page that has two...

Javascript

Problems with "Rich HTML Balloon Tooltip"

by: mikek12004 | last post by:

1) Script Title: Rich HTML Balloon Tooltip 2) Script URL :http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm 3) Problem Description: See this page General Music for links you can...

Javascript

Passing "img" of img.src as argument

by: enaz | last post by:

Ok, so, this is my first post, if there is any info i am leaving out please tell me this is the function: function mouseOver(c) { alert(c);  if (c.src ==...

Javascript

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

CSS image "mouseover"

Similar topics